<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: header(~{::title}, ~{::link})">
    <title>资源管理</title>
    <link th:href="@{/static/css/plugins/jsTree/style.min.css}" rel="stylesheet">
</head>
<body th:replace="layout :: body(~{::#pageHead}, ~{::#content}, ~{::script})">
<div class="row wrapper border-bottom white-bg page-heading" id="pageHead">
    <div class="col-sm-4">
        <h2>This is main title</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">This is</a>
            </li>
            <li class="active">
                <strong>Breadcrumb</strong>
            </li>
        </ol>
    </div>
    <div class="col-sm-8">
        <div class="title-action">
            <a href="" class="btn btn-primary">This is action area</a>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content" id="content">
    <div class="row">
        <div class="col-lg-3">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>资源详情</h5>
                    <div class="ibox-tools">
                        <button type="button" id="addBtn" title="新增" class="btn btn-success btn-xs"><i class="fa fa-plus"></i></button>
                        <button type="button" id="editBtn" title="编辑" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i></button>
                        <button type="button" id="deleteBtn" title="删除" class="btn btn-danger btn-xs"><i class="fa fa-remove"></i></button>
                    </div>
                </div>

                <div class="ibox-content">
                    <div id="jsTree"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>资源列表</h5>
                </div>

                <div class="ibox-content" id="detailDiv">

                </div>
            </div>
            <div class="ibox">
                <div class="ibox-title">
                    <h5>下级资源列表</h5>
                </div>

                <div class="ibox-content">
                    <div class="jqGrid_wrapper">
                        <table id="table_list"></table>
                        <div id="pager_list"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:replace="sys/resource/manage :: #manageTpl"></script>
<script th:replace="sys/resource/detail :: #detailTpl"></script>
<script th:src="@{/static/js/plugins/jsTree/jstree.min.js}"></script>
<script th:src="@{/static/js/plugins/art-template/template-web.js}"></script>
<script>
    $(document).ready(function(){
        var jqGrid = $("#table_list").jqGrid({
            datatype: 'local',
            colModel: [
                {label: '资源名称', name: 'name'},
                {label: '权限标识', name: 'identity'},
                {label: 'url', name: 'url'},
                {label: '权重', name: 'weight'},
            ],
            pager: '#pager_list'
        });
        var $jsTree = $('#jsTree').jstree({
            'core': {
                'data': function (obj, cb) {
                    $.getJSON('/sys/resource/tree', {'async': false}, function (result) {
                        $.each(result.data, function (index, item) {
                            item.id = item.id;
                            item.text = item.name;
                            if (item.parentId == 0) {
                                item.parent = '#';
                            } else {
                                item.parent = item.parentId;
                            }
                        });
                        cb.call(this, result.data);
                    })
                }
            },
            'plugins': ['dnd', 'changed'],
            'checkbox': {
                'three_state': false,
                'whole_node': true,
                'keep_selected_style': true
            }
        });
        $jsTree.on('changed.jstree', function (e, data) {
            var resourceId = data.selected[0];
            $.getJSON('/sys/resource/'+resourceId+'/detailAndChildren', function (result) {
                var html = template('detailTpl', result.data);
                $("#detailDiv").html(html);
                jqGrid.jqGrid('setGridParam', {
                    data: result.data.children
                }).trigger('reloadGrid');
            })
        });

        $("#addBtn").on('click', function () {
            var checkedNodes = $jsTree.jstree("get_selected");
            if (checkedNodes.length != 1) {
                alert("请选择一个节点进行操作");
                return;
            }
            var data = {'parentId': checkedNodes[0], 'name': '', 'url': '', 'identity': ''};
            var html = template('manageTpl', data);
            BootstrapDialog.show({
                message: html,
                onshown: function (dialog) {
                    var $form = dialog.getModalBody().find('form');
                    $form.formValidation({
                        trigger: 'blur',
                        locale: 'zh_CN',
                        fields:{
                            name: {validators: {notEmpty: {}}},
                        }
                    }).on('success.form.fv', function (e) {
                        e.preventDefault();
                        var formData = $form.serialize();
                        $.ajax({
                            url: '/sys/resource',
                            type: 'POST',
                            data: formData,
                            success: function (result) {
                                if (result.success) {
                                    //todo
                                    dialog.close();
                                } else {
                                    //todo
                                }
                            }
                        });
                    });
                },
                buttons: [
                    {
                        label: '取消',
                        action: function (dialog) {
                            dialog.close();
                        }
                    },{
                        label: '确定',
                        cssClass:"btn-primary",
                        action: function (dialog) {
                            var $modalBody = dialog.getModalBody();
                            $modalBody.find('form').formValidation('validate');
                        }
                    }
                ]
            });
        })
    });
</script>
</body>
</html>